<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>课程介绍</title>
    <link href="{{env('CDN_RESOURCE')}}/css/mobile/mobile.css?v={{config('app.version')}}" rel="stylesheet" type="text/css">
    <style>
        html, body {
            /* 設定body高度為100% 拉到視窗可視的大小 */
            height: 100%;
        }

        #level {
            line-height: 0;
            padding: 3% 7%;
        }

        #level > .lesson {
            width: 100%;
            display: inline-block;
            margin: 10px 0;
            line-height: 0;
            overflow: hidden;
            border: 1px solid #eaeaea;
            border-radius: 20px;
            color: black;
            outline: none;
            text-decoration: none;
        }

        #level > .lesson > a:link, a:active, a:visited, a:hover {
            color: black;
            text-decoration: none;
        }

        #level > .lesson > .lesson-img {
            width: 100%;
        }

        #level > .lesson > .lesson-title {
            margin: 0;
            height: 40px;
            text-align: center;
            font-size: 14px;
            line-height: 40px;
        }

        @keyframes e {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }
            to {
                -webkit-transform: rotate(1turn);
                transform: rotate(1turn)
            }
        }

        .loading {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            display: none;
            vertical-align: middle;
            -webkit-animation: e 1s steps(12) infinite;
            animation: e 1s steps(12) infinite;
            background: transparent url() no-repeat;
            background-size: 100%
        }
    </style>
    <script type="text/javascript" src="https://static-app.97kid.com/wx/js/zepto.min.js"></script>
</head>
<body>
    <div id="level"></div>
    <div id="loading" class="loading"></div>
    <script>
        $(document).ready(function () {
            var isRender = false;

            showLoading();
            var list = $.grep(@include('LevelIntroduction.template.level'), function (item) {
                return item.id !== 13 && item.logoUri;
            });
            preLoadImage(list);

            function preLoadImage (list) {
                var count = 0;
                $.each(list, function (index, item) {
                    var img = new Image();
                    img.src = 'https://gstatic.97kid.com' + item.logoUri;
                    img.onload = function () {
                        count++;
                        if (count === list.length) render(list);
                    };
                });
                setTimeout(function () {
                    render(list);
                }, 3000);
            }

            function render (list) {
                if (isRender) return;
                isRender = true;
                var html = '';
                $.each(list, function (index, item) {
                    html += '<a class="lesson" href="http://qkids.cn/levelintroduction/' + item.id + '">' +
                        '<img class="lesson-img" src="https://gstatic.97kid.com' + item.logoUri + '">' +
                        '<p class="lesson-title">' + item.name + '</p>' +
                        '</a>'
                });
                $('#level').css('visibility', 'hidden');
                hiddenLoading();
                $('#level').append(html);
                $('#level').css('visibility', '');
            }

            function showLoading () {
                $('#loading').css('display', 'block');
            }
            function hiddenLoading () {
                $('#loading').css('display', 'none');
            }
        })
    </script>

@include('template.ga')
</body>
</html>